<template>
  <div class="hello">
    <h1 class="title"></h1>
    <div class="content">这里是内容</div>
    <div class="footer">这里是尾部</div>
  </div>
</template>

<script>
export default {
    name: 'HelloWorld',
    data() {
        return {
            responseInfos: [],
            defaultProps: {
                children: 'children',
                label: 'label',
            },
        };
    },
    methods: {
        stopEvent: function(e) {
            console.log('stopPropagation');
            e.stopPropagation();
        },
        showMsg: function(e) {
            e.stopImmediatePropagation();
            console.log('33333');
        },
        getChildNodes: function(list) {
            const childList = list.map(item => {
                return {
                    label: item.label,
                    children: [...item.groupList, ...this.getChildNodes(item.children || [])],
                };
            });
            return childList;
        },
    },
    computed: {
        treeData() {
            let responseInfos = this.responseInfos;
            responseInfos = JSON.stringify(responseInfos);
            responseInfos = responseInfos.replace(/groupCardName/g, 'label');
            responseInfos = responseInfos.replace(/groupName/g, 'label');
            responseInfos = responseInfos.replace(/groupCateName/g, 'label');
            responseInfos = responseInfos.replace(/childGroupGates/g, 'children');
            responseInfos = JSON.parse(responseInfos);
            const result = this.getChildNodes(responseInfos);
            return result;
        },
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.title {
    color: red;
}
</style>
